<template>
	<view>
		<view style="position: relative;">
			<!-- 选择 -->
			<view class="select-box">
<!--				<view class="select-box-txt" :class="0 == activeId?'active':''" @click="deviceTypeChange()">-->
<!--					<text>全部</text>-->
<!--					&lt;!&ndash; <i class="iconfont iconsanjiaoxing" :class="deviceTypeShow?'active':''"></i> &ndash;&gt;-->
<!--				</view>-->
				<view class="select-box-txt" :style="{padding: deviceTypes.length<=5?'0 50rpx':'0 40rpx'}" :class="(itm.id == selectId || itm.select)?'active':''" v-for="(itm,index) in deviceTypes"
					@click="deviceTypeChange(itm)" :key="index">
					<text :title="itm.name">{{itm.name}}</text>
				</view>

				<!-- <view class="select-box-txt" :class="deviceTypeShow?'active':''" @click="activeTop('设备类型')">
					设备类型
					<i class="iconfont iconsanjiaoxing" :class="deviceTypeShow?'active':''"></i>
				</view> -->
				<!-- <view class="select-box-txt" :class="stateShow?'active':''" @click="activeTop('状态')">
					状态
					<i class="iconfont iconsanjiaoxing" :class="stateShow?'active':''"></i>
				</view>
				<view class="select-box-txt" :class="sortShow?'active':''" @click="activeTop('排序')">
					排序
					<i class="iconfont iconsanjiaoxing" :class="sortShow?'active':''"></i>
				</view> -->
			</view>
<!--			<view style="position: absolute;top: 0;right: 0;" class="select-box-txt" :class="deviceTypeShow?'active':''" @click="activeTop('设备类型')">-->
<!--				<image src="../../static/newh5/down.png" class="yticon" style="width: 19px;height: 10px;"-->
<!--					v-show='!showIcon&&deviceTypes.length>5'></image>-->
<!--				<image src="../../static/newh5/up.png" class="yticon" style="width: 19px;height: 10px;"-->
<!--					v-show='showIcon&&deviceTypes.length>5'></image>-->
<!--				&lt;!&ndash; <i class="iconfont iconsanjiaoxing" :class="deviceTypeShow?'active':''"></i> &ndash;&gt;-->
<!--			</view>-->
		</view>

		<!-- 遮罩 -->
		<!-- <view class="opacity-box" @click="hiddenAlert" v-show="deviceTypeShow||stateShow||sortShow"></view> -->
		<!-- end -->
		<view class="box" :style="{width: tableWidth2}" v-if="deviceTypeShow">
			<!-- <view class="box-top">
			<view class="box-top-txt" v-for="(item, index) in problemDataList" :key="index">
				{{item.name}}
				<span :style="{color: item.name === '报修问题'?'#417AEB':item.name === '已解决问题'?'#15C2C2':item.name === '未处理问题'?'#EC2B2B':''}">{{item.value}}</span>
			</view>
		</view> -->
			<!-- end -->
			<!-- 设备类型 -->
			<!-- <view class="content1" -->
			<!-- :style="{height: scrollerHeight}" -->
			<scroll-view scroll-y scroll-with-animation class="content1-box">
        22
				<view class="content1-box-txt" :class="(item.id == selectId || item.select)?'active':''" v-for="(item, index) in deviceTypes"
					@click="deviceTypeChange(item)" :key="index">
					{{item.name |omitWord(5)}}
				</view>
			</scroll-view>
			<!-- <view class="content1-but">
				<button class="content1-but-cancel" @click="cancelDeviceTypeShow">取消</button>
				<button class="content1-but-confirm" @click="typeConfirm">确定</button>
			</view> -->
			<!-- </view> -->
			<!-- end -->
			<!-- 状态 -->
			<view class="state-list" v-if="stateShow">
				<view class="state-box" :class="stateIndex === index?'active':''" v-for="(item, index) in stateList"
					:key="index" @click="stateActive(item, index)">
					<span>{{item.name}}</span>
					<i class="iconfont iconsuccess" v-show="stateIndex === index"></i>
				</view>
			</view>
			<!-- end -->
			<!-- 排序 -->
			<view class="state-list" v-if="sortShow">
				<view class="state-box" :class="sortIndex === index?'active':''" v-for="(item, index) in sortList"
					:key="index" @click="sortActive(item, index)">
					<span>{{item.name}}</span>
					<i class="iconfont iconsuccess" v-show="sortIndex === index"></i>
				</view>
			</view>
			<!-- end -->
		</view>

	</view>
</template>

<script>
	export default {
		name: 'tabControl',
		data() {
			return {
        activeId: '',
				tableWidth: 270,
				showIcon: false,
				sendFotherValue: [],
				sortIndex: 0, // 排序->当前选中状态
				stateIndex: 0, // 状态->当前选中状态
				deviceTypeShow: false,
				stateShow: false,
				sortShow: false,
				problemDataList: [], // 顶部数据
				deviceType: [],
				// deviceType:[
				// 	{name: '全部', select: false},
				// 	{name: '电梯', select: false},
				// 	{name: '水泵房', select: false},
				// 	{name: '监控室', select: false},
				// 	{name: '消控室', select: false},
				// 	{name: '配电房', select: false},
				// 	{name: '其他', select: false},
				// ],
				stateList: [{
						name: '全部',
						dealStatus: ''
					},
					{
						name: '待受理',
						dealStatus: '1'
					},
					{
						name: '已受理',
						dealStatus: '2'
					},
					{
						name: '已退回',
						dealStatus: '3'
					},
					{
						name: '处理中',
						dealStatus: '4'
					},
					{
						name: '已解决',
						dealStatus: '5'
					}
				],
				sortList: [{
						name: '默认',
						Ordercode: ''
					},
					{
						name: '创建时间顺序',
						Ordercode: '1'
					},
					{
						name: '创建时间倒序',
						Ordercode: '2'
					},
				]
			}
		},
		props: {
			deviceTypes: {
				type: Array,
				default: []
			},
      selectId: {
			  type: String,
        default: '',
      },
			problemData: {
				type: Array,
				default: []
			},
      purchaserCatalogIds: {
				type: Array,
				default: []
			},
		},
		watch: {
			deviceTypes: {
				// 深度监听
				//deep: true,
				handler(newVal, oldVal) {
					console.log('输出属性', this.deviceTypeShow);
					this.deviceTypeShow = false
				}
			},
		},
		computed: {
			scrollerHeight: function() {
				return this.deviceTypes.length < 3 ? (30 + 'px') : (this.deviceTypes.length < 60 ? (this.deviceTypes
					.length / 3) * 40 + 'px' : 350 + 'px')
			},
			tableWidth2: function() {
				let data = ''
				uni.getSystemInfo({
					success: function(res) {
						data = res.windowWidth * 0.72 + 'px'
					}
				});
				return data
			},
		},
		mounted() {
			uni.getSystemInfo({
				success: function(res) {
					console.log('windowWidth', res.windowWidth);
					this.tableWidth = res.windowWidth * 0.7
					this.tableWidth = this.tableWidth + 'px'
					console.log('this.tableWidth', this.tableWidth);
				}
			});
		},
		methods: {
			hiddenAlert() {
				this.deviceTypeShow = false;
				this.stateShow = false;
				this.sortShow = false;
			},
			/* 顶部类型切换 */
			activeTop(val) {
				if (val === '设备类型') {
					this.showIcon = !this.showIcon
					this.deviceTypeShow = !this.deviceTypeShow;
					this.stateShow = false;
					this.sortShow = false;
				} else if (val === '状态') {
					this.deviceTypeShow = false;
					this.stateShow = !this.stateShow;
					this.sortShow = false;
				} else if (val === '排序') {
					this.deviceTypeShow = false;
					this.stateShow = false;
					this.sortShow = !this.sortShow;
				}
			},
			/* 设备类型 */
			deviceTypeChange(e) {
				console.log('e', e);
				if (!e){
          this.activeId = 0
          this.sendFotherValue = this.purchaserCatalogIds
        }else {
          this.activeId = e.id

          this.deviceTypes.some((item, index) => {
            if (e.name === "全部" && item.name === "全部") {
              this.deviceTypes.map((it, i) => {
                if (i >= 1) {
                  it.select = false;
                }
              })
              item.select = !item.select;
            } else if (item.id === e.id) {
              // this.deviceTypes[0].select = false;
              // item.select = !item.select;
              return true;
            }
          })
          this.sendFotherValue = []
          this.sendFotherValue = [this.activeId]
		  if(this.deviceTypes.length > 5) {
			  // this.activeTop('设备类型')
			  this.showIcon = false
			  this.deviceTypeShow = false
			  // this.stateShow = false;
			  // this.sortShow = false;
		  }
        }

				// this.deviceTypes.forEach(element => {
				// 	if (element.select) {
				// 		this.sendFotherValue.push(element.id)
				// 	}
				// });
				console.log('this.sendFotherValue', this.sendFotherValue);
				this.clickEvent()
			},
			clickEvent() {
				this.$emit('sendValueToParent', this.sendFotherValue, true);
			},
			cancelDeviceTypeShow() {
				this.deviceTypeShow = false;
			},
			typeConfirm() {
				this.deviceTypeShow = false;
				let selectTrue = [];
				this.deviceType.map(item => {
					if (item.select) {
						selectTrue.push(item)
					}
				})
				this.$emit("typeConfirm", selectTrue)
			},
			/* end */
			/* 状态 */
			stateActive(item, index) {
				this.stateIndex = index;
				this.stateShow = false;
				this.$emit("stateActive", item)
			},
			/* end */
			/* 排序 */
			sortActive(item, index) {
				this.sortIndex = index;
				this.sortShow = false;
				this.$emit("sortActive", item)
			}
			/* end */
		}
	}
</script>

<style lang="less" scoped>
	button::after {
		display: none;
	}

	.box {
		position: fixed;
		z-index: 9;
		// left: 106px;
		top: 170rpx;
		padding-bottom: calc(50px + env(safe-area-inset-bottom));
		height: calc(100% - 170rpx);
		// width: 290px;
		// width: 80%;
		// background-color:red;
	}

	.box-top {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 10rpx #d4d4d4;
	}

	.box-top-txt {
		font-size: 26rpx;
		color: #666666;

		span {
			font-size: 32rpx;
			margin-left: 6rpx;
		}
	}

	.select-box {
		width: 100%;
		height: 70rpx;
		position: relative;;
		// display: flex;
		// justify-content: space-around;
		align-items: center;
		overflow-x: auto;
		width: 750rpx;
		position: relative;
    white-space: nowrap;
    // width: 237px;
    overflow-x: auto;
    height: 48px;
    line-height: 48px;
	}

	.select-box-txt {
		// padding: 10rpx;
		color: #323233;
		// font-size: 25rpx;
		// display: flex;
		display: inline-block;
		justify-content: center;
		align-items: center;
		padding: 0 44rpx;
		//transition-duration: 0.5s;
    //line-height: 35px;

		i {
			transition-duration: 0.5s;
			margin-left: 10rpx;
			font-size: 10rpx;
			color: #DCDEE0;
		}

		i.active {
			transform: rotate(180deg);
		}
	}

	.select-box-txt.active {
		color: #376EF1;
    border-bottom: 2px solid #376EF1;
    height: 48px;
		i {
			color: #376EF1;
		}
	}

	.opacity-box {
		background-color: rgba(0, 0, 0, .6);
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
	}

	.content1-box {
		max-height: 100%;
		height: 100%;
		padding: 4rpx 20rpx 0 0;
		background-color: white;
		/deep/ .uni-scroll-view-content{
		// height: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		height: fit-content;
		// height: calc(100% + 70rpx);
		// height: fit-content;
		// height: 400px;
		// overflow-y: auto;
		// margin-top: 10px;
		}
	}

	.content1-box-txt {
		width: calc((100% - 60rpx) / 3);
		height: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 64rpx;
		border: 1rpx solid #DCDEE0;
		color: #323233;
		font-size: 17rpx;
		overflow: hidden;
		font-family: Arial-regular;
		// margin: 16rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.content1-box-txt.active {
		border: 1rpx solid #376EF1;
		color: #376EF1;
		background-color: #ECF2FF;
	}

	.content1-but {
		display: flex;
		justify-content: space-between;
		margin: 80rpx 0 30rpx;

		button {
			width: 330rpx;
			height: 80rpx;
			font-size: 28rpx;
			border-radius: 80rpx;
			line-height: 80rpx;
		}
	}

	.content1-but-cancel {
		color: #323233;
		border: 1rpx solid #DCDEE0;
		background-color: #FFFFFF;
		box-shadow: none;
	}

	.content1-but-confirm {
		color: #FFFFFF;
		border: 1rpx solid #DCDEE0;
		background-color: #376EF1;
	}

	.state-list {
		width: 100%;
	}

	.state-box {
		color: #323233;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: 1rpx solid #EBEDF0;
		margin: 0 32rpx;
	}

	.state-box.active {
		// color: #376EF1;
		border: 1rpx solid #376EF1;
		color: #376EF1;
		background-color: #ECF2FF;
	}
</style>
